<div class='panel panel-default grid'>
<div class='panel-heading' >	
        <i class='fa fa-suitcase fa-2x' style="margin-right: 10px"></i>新建主题</div>
	<form id="frmTheme" class="form-horizontal" style="padding:10px">
		<input name="themeId" type="hidden">
	<div id="tabs" >
		<ul >
 		<li><a href="#tabs-1">基本信息</a></li>
  		<li><a href="#tabs-2">主题相册</a></li>
		</ul>
		<div id="tabs-1">
		<div  class="form-group">
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon"><span class="must-msg">*&nbsp;</span>主题名:</div>
                <input name="themename" type="text" class="form-control validate[required]"
                       data-validation-engine="validate[required]"
                       data-errormessage-value-missing="主题名不能为空"
                       placeholder="请输入主题">
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">最少玩家:</div>
                <input name="minimum" id="minimum" type="text" class="form-control"
                       data-errormessage-value-missing="最少玩家不能为空"
                       data-validation-engine="validate[required,min[0],max[9999],custom[number]]"
                       data-errormessage-range-underflow="输入的值不能为负数"
                       data-errormessage-range-overflow="输入的值过大"
                       data-errormessage-custom-error="只能输入数字!"
                       placeholder="请输入最少玩家数">
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">密室大小:</div>
                <select name="size" class="form-control">
                    <option value="1">小型密室（1间房）</option>
                    <option value="2">中型密室（2-3间）</option>
                    <option value="3">大型密室（3-5间）</option>
                    <option value="4">超级密室（>5间）</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">题材:</div>
                <select name="content" class="form-control">
                    <option value="1">越狱类</option>
                    <option value="2">恐怖类</option>
                    <option value="3">中国风</option>
                    <option value="4">谍战类</option>
                    <option value="5">盗墓类</option>
                    <option value="6">科幻类</option>
                    <option value="7">动漫类</option>
                    <option value="0">其它类</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">难度星级:</div>
                <select name="diffStar" class="form-control">
                    <option value="1">1星级</option>
                    <option value="2">2星级</option>
                    <option value="3">3星级</option>
                    <option value="4">4星级</option>
                    <option value="5">5星级</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">逻辑星级:</div>
                <select name="logicStar" class="form-control">
                    <option value="1">1星级</option>
                    <option value="2">2星级</option>
                    <option value="3">3星级</option>
                    <option value="4">4星级</option>
                    <option value="5">5星级</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">分类:</div>
                <select name="category" class="form-control">
                    <option value="1">逻辑密室</option>
                    <option value="2">机关密室</option>
                    <option value="3">剧情密室</option>
                    <option value="4">大型机械密室</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">动作星级:</div>
                <select name="actionStar" class="form-control">
                    <option value="1">1星级</option>
                    <option value="2">2星级</option>
                    <option value="3">3星级</option>
                    <option value="4">4星级</option>
                    <option value="5">5星级</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">场景星级:</div>
                <select name="sceneStar" class="form-control">
                    <option value="1">1星级</option>
                    <option value="2">2星级</option>
                    <option value="3">3星级</option>
                    <option value="4">4星级</option>
                    <option value="5">5星级</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">主题有效期:</div>
                <input name="endDate" id="endDate" type="text" class="form-control"
                       data-validation-engine="validate[required,custom[date],future[NOW]]"
                       data-errormessage-future-error="主题有效期需在今天之后"
                       data-errormessage-custom-error="主题有效期不正确"
                       placeholder="请选择主题有效期">
            </div>
        </div>
    <!--  <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">通关经验值:</div>
                <input name="experience" type="text" class="form-control"
                       data-validation-engine="validate[required,min[0],max[999999],custom[number]]"
                       data-errormessage-range-underflow="输入的值不能为负数"
                       data-errormessage-range-overflow="输入的值过大"
                       data-errormessage-custom-error="只能输入数字!"
                       placeholder="请输入通关经验值">
            </div>
        </div>-->
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">主题状态:</div>
                <select name="status" class="form-control">
                    <option selected value="0">可用</option>
                    <option value="1">不可用</option>
                </select>
            </div>
        </div>
        <div class="col-xs-4 form-padding">
            <div class="input-group">
                <div class="input-group-addon">价格:</div>
                <select id="priceType" name="priceType" class="form-control" onchange="getClass()">
                    <option value="0">单价</option>
                    <option value="1" >包场价</option>
                </select>
            </div>
            <div id="price_div"  class="col-xs-12 form-padding">
            <div class="input-group">
                <input name="price" type="text" class="form-control" 
                	data-validation-engine="validate[required,min[1],custom[number]]"
                	data-errormessage-custom-error="只能输入数字!"
                	data-errormessage-range-underflow="输入的值不能小于1"
                	placeholder="请输入单价" >
            </div>
         </div>
         <div id="pricestr"  style="display:none;" class="col-xs-12 form-padding" >
         	  <input id="pricestr_in" style="color:red;border:0px;" value="请设置包场价"/>
       	 </div>
        </div>
        <div class="col-xs-12 form-padding">
            <div class="input-group">
                <div class="input-group-addon">使用说明:</div>
                <textarea name="remark" rows="3" class="form-control"
                		data-validation-engine="validate[maxSize[255]]"
                        data-errormessage-range-overflow="使用说明过长(最长255位)"></textarea>
            </div>
        </div>
        </div>
        </div>
        <div id="tabs-2">
        <div class="form-group">
            <div class="col-xs-12 panel panel-default" style="position: relative;width:97%;margin: 0 auto;margin: 1em;top:0px;left:0px;">
                <div class="info" style="margin-top: 10px;">主题相册中共 {{shop.photo.length}} 张照片。</div>
                <div class="queueList" style="margin-top: 10px;">
                    <ul class="filelist" style="height: 120px;" >
                        <li ms-repeat="theme.photo" >
                            <p class="imgWrap">
                                <img ms-src="el + '?/1/w/100/h/150'">
                            </p>
                            <div class="file-panel" style="height:28px;">
                                <span class="cancel" ms-click="removePhotoClick(el)">删除</span>
                            </div>
                        </li>
                        <li>
                            <i class="fa fa-plus-square-o" ms-click="uploaderClick()" style="font-size:120px;cursor:pointer;"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
        <div style=" text-align:center"">
			    <button id="save_but" class="btn btn-info" style="margin-right:5px" >确定</button>
			    <button id="callback_but" class="btn btn-default ">取消</button>
		</div>
   </div>
   </form>
   
</div>
<script type="text/html" id="pricestr_js">
	 <input id="pricestr_in" style="color:red;border:0px;width:100%;" value="{{pricestr}}"/>
</script>
<script type="text/javascript">
	var pricelog={
		popWidth : 500,
		src:"html/pricetype.html",
		title:"",
		btnShow : false
	};
$("#pricestr").click(function (){
		themeId=theme_Id
		globalVariable.Operation = "price";
		pricelog.title="包场价设置"
		Pricelog=popWindowShow(pricelog);
	});
$("#callback_but").click(function(){
		$("#menuPage").empty().load("html/theme_list.html");
	});
function getClass(){
		var name=$("#priceType").val();
	if(name==0){
		$("#price_div").show();
		$("#pricestr").hide();
		
	}else{
		$("#price_div").hide();
		$("#pricestr").show();
		
		}
	}
	if (theme_Id!="") {
			callSvr("theme/getThemeInfo",{themeId:theme_Id},function(result){
				$("#frmTheme").jsonToform(result);
				if($("#priceType").val()==0){
					$("#price_div").show();
					$("#pricestr").hide();
					
				}else{
					$("#price_div").hide();
					$("#pricestr").show();
					priceStr();
					
				}
			});
	}
	function priceStr(){
		callSvr("theme/priceStr",{themeId:theme_Id},function(result){
				var html = template('pricestr_js',result);
				$("#pricestr").html(html);
			});
	}
	    $("#frmTheme").validationEngine({
		        promptPosition: "centerRight",
		        binded : true,  
		        onValidationComplete : frmThemeSuccess,
		        addPromptClass:"formError-small",
		        fadeDuration:0
	});
	function frmThemeSuccess(form,status) {
        if (status) {
			if(theme_Id!=""){
				var from=$("#frmTheme").formToJson();
				 callSvr("theme/modifyShopTheme",from, function(result){
					$("#menuPage").empty().load("html/theme_list.html");
			       });
				 
			}else{
				 var from=$("#frmTheme").formToJson();
				 callSvr("theme/createShopTheme",from, function(result){
					$("#menuPage").empty().load("html/theme_list.html");
		        });
			 }
        }
    }
  $(function() {
    $( "#tabs" ).tabs();
  });
	$(function(){
		$("#endDate").datetimepicker({
			lang:'ch',//中文化
			timepicker:true,//关闭时间选择器
			format:'Y-m-d',//时间格式
			validateOnBlur:false,//插件离开时选择时间
			closeOnWithoutClick:true //点击日历插件外面自动关闭
		});
		//初始化表单验证
        $("#userForm").validationEngine({
            promptPosition: "centerRight",//提示信息的位置，默认就是	topRight ("topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline")
            binded : true,  //是否绑定实时验
            onValidationComplete : themeFormSuccess,
            addPromptClass:"formError-small",
            fadeDuration:0
        });
	});
    var dialog={
        popWidth : 800,
        src:"html/uploader_dialog.html",
        title:"照片上传"
    };
    function themeFormSuccess(form,status) {
        if (status) {
        	toastr.success('Validation Successfully !','');
        	 if (themeId!=""){
                callSvr("theme/modifyTheme",model.theme,function(data){
                    if(data.err==0){
                        toastr.success("成功修改了主题！");
                        getShopThemeInfo();
                        Dialog.exit();

                    }else{
                        toastr.error("修改失败！");
                    }
                });
        	 }else{
                callSvr("theme/createTheme",para,function(data){
                    if(data.err==0){
                        toastr.success("成功添加了主题！");
                        getShopThemeInfo();
                        Dialog.exit();
                    }
                });
        	 }
        }
    }
</script>
